<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件事件</title>
</head>
<body>
<div id="app">
    <input type="text" v-model="title">
    <main-template @dw="a" @gz="b" :title="title"></main-template>
</div>

<template id="mainTemplate">
    <div>
        <p>{{title}}</p>
        <button @click="click">点击</button>
        <button @click="click2()">改值</button>
        <ul>
            <li v-for="(item,index) in list" :key="index">{{item.bookName}}</li>
        </ul>
    </div>
</template>
</body>
</html>
<script type="module">
    import {} from './js/vue.js'

    let mainTemplate = {
        template: '#mainTemplate',
        props: ["title"],
        data(){ // 存放组件数据
            return{
                list: [
                    {bookName:'Spring'},
                    {bookName:'SSM'},
                    {bookName:'Mybatis'},
                    {bookName:'SpringMvc'},
                ]
                 //title:'c'//报错
            }
        },
        methods: {
            // 组件内部方法
            click(){
                this.$emit('dw')
                console.log("组件内部方法")
            },
            click2() {
                this.$emit('gz','修改')
            }
        },
        created(){
            console.log("展示组件加载完成")
        }
    }

    new Vue({
        el: '#app',
        data: {
            title: '测试'
        },
        methods: {
            a(){
                console.log("父组件方法")
            },
            b(title){
                this.title=title
            }
        },
        components: {
            mainTemplate:mainTemplate
        }
    })
</script>